<div class="container" th:fragment="info">

    <div class="col-md-6 offset-md-3 u-card">
        <h1>修改个人信息</h1><hr>
        <form id="form-user-img" enctype="multipart/form-data" >
        <!--图片裁剪框 start-->
            <div style="display: none" class="tailoring-container">
                <div class="black-cloth" onclick="closeTailor(this)"></div>
                <div class="tailoring-content">
                    <div class="tailoring-content-one">
                        <label title="上传图片" for="chooseImg" class="btn btn-primary choose-btn">
                            <input name="file" type="file" accept="image/jpg,image/jpeg,image/png" id="chooseImg" class="hidden" onchange="selectImg(this)">
                            选择图片
                        </label>
                        <span class="text-danger">仅支持image/jpg,image/jpeg,image/png格式，图片大小限制在2MB内</span>
                        <div class="close-tailoring"  onclick="closeTailor(this)">×</div>
                    </div>
                    <div class="tailoring-content-two">
                        <div class="tailoring-box-parcel">
                            <img id="tailoringImg">
                        </div>
                        <div class="preview-box-parcel">
                            <p>图片预览：</p>
                            <div class="square previewImg"></div>
                            <div class="circular previewImg"></div>
                        </div>
                    </div>
                    <div class="tailoring-content-three">
                        <button type="button" class="btn btn-warning cropper-reset-btn">复位</button>
                        <button type="button" class="btn btn-warning cropper-rotate-btn">旋转</button>
                        <button type="button" class="btn btn-warning cropper-scaleX-btn">换向</button>
                        <button type="button" class="btn btn-success sureCut" id="sureCut">确定</button>
                    </div>
                </div>
            </div>
        </form>
        <form id="form-user-modify" method="post">
        <ul>
            <li>
                <div class="container-fluid row">
                    <div class="col-md-5">
                        <p><img id="finalImg" style="width: 100px;height: 100px;border-radius: 50%;"
                                th:src="${session.userInfo.img}" th:data-src="${session.userInfo.img}">
                        </p>
                        <button id="replaceImg" type="button" class="btn btn-danger u-btn-modify-img">编辑头像</button>
                    </div>

                    <div class="col-md-7">
                        <nav>
                            <label>身份:</label>
                            <span class="text-danger" th:text="${session.userInfo.role.roleName}"/>
                        </nav>
                        <nav>
                            <label>
                                性别:
                            </label>
                            <input name="gender" id="form-gender-man"  type="radio" value="2" th:data-gender="${session.userInfo.gender}">
                            <label class="p-0" for="form-gender-man" style="background: none">
                                男
                            </label>
                            <input name="gender" id="form-gender-woman" type="radio" value="1" th:data-gender="${session.userInfo.gender}">
                            <label class="p-0" for="form-gender-woman" style="background: none">
                                女
                            </label>
                        </nav>
                        <nav>
                            <label for="form-birthday">生日:</label>
                            <input name="birthdayString" type="date" id="form-birthday" th:value="${session.userInfo.birthdayString}">
                        </nav>
                    </div>
                </div>
            </li>
            <li>
                <label>名称:</label>
                <input id="form-name" name="username" type="text" th:value="${session.userInfo.username}" th:data-name="${session.userInfo.username}">
                <span style="color: gray; font-size: 10px">* 目前只支持中文，最大长度5</span>
            </li>
            <li>
                <label for="form-phone">联系电话:</label>
                <input name="phone" id="form-phone" type="text" th:value="${session.userInfo.phone}"/>
                <span style="color: gray; font-size: 10px">* 暂时只支持11位电话</span>
            </li>
            <li>
                <label for="form-province">所在地区:</label>
                <select name="prov" id="form-province" th:data-addr="${addr.prov}" style="font-size: 10px"></select>
                <select name="city" th:data-addr="${addr.city}" style="font-size: 10px"></select>
                <select name="area" th:data-addr="${addr.area}" style="font-size: 10px"></select>
            </li>
            <li>
                <label for="form-address">详细地址:</label>
                <input name="detail" id="form-address" th:data-addr="${addr.detail}" type="text" placeholder="详细地址">
                <span style="color: gray; font-size: 10px">* 限制在128个字符以内</span>
            </li>
        </ul>
        </form>
        <nav class="text-center">
            <button id="u-btn-modify-save" class="btn btn-primary">保存信息</button>
        </nav>
    </div>
</div>
